import { Fragment,useCallback,useState } from "react";

function PriceInput({
  value = { amount: 0, currency: "rmb" },
  onChange
}) {
  const handleChange = useCallback((deltaValue) => {
    console.log(onChange)
    onChange({ ...value, ...deltaValue })
  }, [value, onChange])
  return (
    <div className="exp-02-price-input">
      <input 
        type="text" 
        value={value.amount}
        onChange = {(evt)=> handleChange({amount:evt.target.value})}
        />
      <select
        value={value.currency}
        onChange = {(evt) => handleChange({currency:evt.target.value})}
        >
          <option value="rmb">RMB</option>
          <option value="dollar">DOLLAR</option>
          <option value="eur">EUR</option>
      </select>
    </div>
  )
}

export default function PriceInputs (){
  const [price,setPrice] = useState();
  return (
    <Fragment>
      <PriceInput value={price} onChange={setPrice}></PriceInput>
      <p>{JSON.stringify(price)}</p>
    </Fragment>
  )
}